<!--
  Generated template for the LoanRecordPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="goBack()">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            累计已贷款金额
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>

</ion-header>
<ion-content>
    <div class="info">
        <time-filter (query)="filter()" [(startDate)]="startFilterDate" [(endDate)]="endFilterDate"
                     [style.borderBottom]="(displayLoanRecordList==null||displayLoanRecordList.length==0)?'0.55px solid #f4f4f4':'none'"></time-filter>
        <ion-list *ngFor="let record of displayLoanRecordList;index as i">
            <div class="ion-list-header">
                <span>{{record.year}}年</span>
                <img groupShowOrHide
                     [src]="i==0?'./assets/images/policy/arrow-up.png':'./assets/images/policy/arrow-d.png'" alt="">
            </div>
            <div [style.display]="i==0?'block':'none'">

                <div class="data-info" *ngFor="let transferRecord of record.loanRecords;index as j">
                    <ion-item [ngClass]="{'no-border':((i < (displayLoanRecordList.length-1)) && (j == (record.loanRecords.length-1)))}">
                        <p>
                            <span>{{transferRecord.loanName}}</span>
                            <span>{{transferRecord.loanDate*1000|myDate:'YYYY/MM/DD'}}</span>
                        </p>
                        <p>
                            <span>{{transferRecord.loanAmount}}</span>
                            <span style="white-space:pre-wrap;">金额结余数{{transferRecord.balance}}</span>
                        </p>
                    </ion-item>
                </div>
            </div>

        </ion-list>
        <div *ngIf="(!displayLoanRecordList || displayLoanRecordList.length === 0) && isLoaded" class="no-data">
            <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
            <div class="no-data-txt">没有相关数据</div>
        </div>
    </div>

    <div class="prompt">
        <span>
            注:
        </span>
        <span>
            贷款利息将按照贷款期间和本公司公布的贷款利率计算，现时贷款利率为{{currentLoanRate*100|number:'1.2-2'}}%
        </span>
    </div>

</ion-content>
